<!-- 管理员:课程考核管理:题库和在线考试管理:试卷库管理:新增试卷:第二步 -->
<template>
  <div style="width:100% !important;">
    <el-form>
      <el-form-item label="组卷方式">
        <el-row></el-row>
        <el-row>
          <el-radio v-model="data1.zjfs"
                    label="1">固定试题组卷</el-radio>
          <el-radio v-model="data1.zjfs"
                    label="2">随机抽题组卷</el-radio>

          <el-button size="mini"
                     :plain=true
                     type="primary"
                     @click="onBtnAddQuestionClickHandler">添加试题</el-button>
          <el-button size="mini"
                     :plain=true
                     type="danger">删除试题</el-button>
        </el-row>
      </el-form-item>
    </el-form>
    <el-dialog title="添加试题"
               :visible.sync="appendAutoQuestionDialog.dialogVisible"
               :close-on-click-modal=false
               :show-close=true
               :center=true
               @tab-click='sjshow=true'
               :close-on-press-escape=false
               width="75%"
               top="2vh"
               custom-class="newClazzDialog">
      <el-tabs type="border-card">
        <el-tab-pane @edit='clsdata'>
          <span slot="label">从题库随机选择试题</span>
          <p class="bule">已选择的章节</p>
          <p class="bule">将从 0 个章节随机抽取 0 个试题.（已在试卷的题不会再显示在章节列表中）</p>
          <div style='width: 1300px;
height: 500px;
border: 1px solid #004CA7;
opacity: 1;
border-radius: 4px;margin: 0 auto;'>
            <div class="bule-b">
              <el-row type="flex"
                      justify="space-around"
                      class="bule-b-top">
                <el-col :span="8"
                        class="bule-b-topten"><b>搜索章节范围</b>
                </el-col>
                <el-col :span="8"
                        class="bule-b-topten"><b>搜索难度范围</b></el-col>
                <el-col :span="8"
                        class="bule-b-topten"><b>选择题型</b></el-col>
              </el-row>
            </div>
            <div>
              <el-row>
                <el-col :span="8">
                  <div class="bule suosuo"> 搜索&nbsp; <el-input placeholder="搜索分类"
                              size=mini
                              style="width:50%"></el-input>&nbsp;
                    <el-button type="primary"
                               size=mini>查询</el-button>
                  </div>
                  <el-tree :data="data"
                           :props="defaultProps"
                           @node-click="handleNodeClick"></el-tree>
                  <div>

                    <el-tag v-for="(item,index) in ZJtag"
                            :key='item.name'
                            @close="handleClose(item)"
                            closable>{{item.name}}</el-tag>
                  </div>
                </el-col>
                <el-col :span="8">
                  <el-checkbox-group v-model="xzsht.stndz"
                                     size="mini">
                    <el-checkbox label="1"
                                 style="border:1px solid #004ca7;  margin: 0 11pc;margin-top: 20px;"
                                 border>{{"简单"}}</el-checkbox><br />
                    <el-checkbox label="2"
                                 style="border:1px solid #004ca7; margin: 0 11pc;margin-top: 20px;"
                                 border> {{"一般"}}</el-checkbox><br />
                    <el-checkbox label="3"
                                 style="border:1px solid #004ca7; margin: 0 11pc;margin-top: 20px;"
                                 border> {{"很难"}}</el-checkbox><br />
                    <el-checkbox label="4"
                                 style="border:1px solid #004ca7 ; margin: 0 11pc;margin-top: 20px;"
                                 border> {{"较难"}}</el-checkbox><br />
                    <el-checkbox label="5"
                                 style="border:1px solid #004ca7;margin: 0  11pc;margin-top: 20px"
                                 border> {{"非常难"}}</el-checkbox><br />
                  </el-checkbox-group>
                </el-col>
                <el-col :span="8">
                  <el-row :gutter="20">
                    <el-col :span="12"
                            :offset="6">
                      <div class="formItemdiv ">
                        <div>
                          <el-radio-group v-model="xzsht.xztx">
                            <el-radio v-for="(item,index) in appendFixedQuestionDialog.questionTypeArray"
                                      :key="index"
                                      :label="item.txmc"
                                      class="myradio"
                                      size="mini"
                                      style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">{{item.txmc}} {{item.quantity}}道</el-radio>
                          </el-radio-group>
                        </div>
                        <div class="buttombox">
                          <el-button type="primary"
                                     icon="el-icon-plus"
                                     class="mybuttom"
                                     circle></el-button><br />
                          <el-button type="primary"
                                     class="mybuttom"
                                     icon="el-icon-delete"
                                     circle></el-button><br />
                          <el-button type="primary"
                                     class="mybuttom"
                                     icon="el-icon-arrow-up"
                                     circle></el-button><br />
                          <el-button type="primary"
                                     class="mybuttom"
                                     icon="el-icon-arrow-down"
                                     circle></el-button>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="手动添加试题"
                     @edit='cls'>
          <div style="height:71vh;overflow:auto;">
            <el-col :span=5>
              <el-form inline="true"
                       label-width="60px">
                <el-row class="xpaas-vertical-align-middle">
                  <el-col span="24">
                    <el-form-item label="搜索：">
                      <el-input size="mini"
                                style="width:16vh;" />
                    </el-form-item>
                    <el-button type="primary"
                               size="mini">查询</el-button>
                  </el-col>
                </el-row>
              </el-form>

              <div style="border:1px solid #004ca7;padding:10px;border-radius:5px;margin:10px 10px 0 0;height:63vh;overflow:auto;">
                <el-tree :data="data"
                         :props="defaultProps"
                         node-key="appendAutoQuestionDialog.id"
                         indent="22"
                         :expand-on-click-node="false"
                         :render-content="renderContent"
                         @node-click="onTreeNodeClickHandler"
                         @current-change="onTreeCurrentChangeHandler"></el-tree>
              </div>
            </el-col>
            <el-col :span=19>
              <el-form inline="true"
                       style="padding:0px 10px;">
                <el-row class="xpaas-vertical-align-middle">
                  <el-col span="24">
                    <el-form-item label="请选择题型：">
                      <el-select v-model="adddata.questionType"
                                 size="mini"
                                 placeholder="请选择">
                        <el-option v-for="(item,index) in appendFixedQuestionDialog.questionTypeArray"
                                   :key="index"
                                   :label="item.txmc"
                                   class="myradio">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="请选择难易程度：">
                      <el-select v-model="adddata.adddata"
                                 size="mini"
                                 placeholder="请选择">
                        <el-option v-for="item in nanyicd"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="请选择标签：">
                      <el-select v-model="adddata.questionType"
                                 size="mini"
                                 placeholder="请选择">
                        <el-option v-for="item in appendFixedQuestionDialog.questionTypeArray"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item> -->
                    <el-button type="primary"
                               icon="el-icon-search"
                               size="mini">查询</el-button>
                  </el-col>
                </el-row>
              </el-form>
              <div style="height:65vh;overflow:auto;">
                <div v-for="(item, index) in questions">
                  <el-col :span=1><br>
                    <el-checkbox v-model="checked"></el-checkbox>
                  </el-col>
                  <el-col :span=23>
                    <div class="questionContainer">
                      <el-row>
                        <el-col :span=4><span class="questionTypeName">{{ item.txmc }}</span></el-col>
                        <el-col :span=20>
                          <el-row><span class="questionTitle">{{ item.sttg }}</span></el-row>
                          <el-row>
                            <div class="questionAnswers">
                              <el-row v-for="answer in item.daxx"><span class="questionAnswer">{{ answer }}</span></el-row>
                            </div>
                          </el-row>
                          <el-row>
                            <span class="questionRightAnswer">正确答案：</span>
                            <div class="questionAnswers">
                              <el-row v-for="answer in item.zqda"><span class="questionAnswer">{{ answer }}</span></el-row>
                            </div>
                          </el-row>
                          <el-row><span class="questionAnswer">题目解析：{{ item.tmjx }}</span></el-row>
                          <el-row><span class="questionAnswer">难度：</span><span class="questionLabel">{{ item.stndz }}</span></el-row>
                          <!-- <el-row>
                            <span class="questionSomethingLabel"
                                  style="padding-left:5px;margin-left:10px;">章节：<span class="questionSomething">{{ item.stzj }}</span></span>
                            <span class="questionSomethingLabel">更新于：<span class="questionSomething">{{ item.updateTime }}</span></span>
                            <span class="questionSomethingLabel">历史难度系数：<span class="questionSomething">{{ item.difficulty }}</span></span>
                            <span class="questionSomethingLabel">总作答次数：<span class="questionSomething">{{ item.testTimes }}</span></span>
                          </el-row> -->
                        </el-col>
                      </el-row>
                    </div>
                  </el-col>
                </div>
              </div>
            </el-col>
          </div>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer"
            @edit='clsdata1'>
        <el-button size="mini"
                   type="success"
                   @click="onAutoQuestionDialogBtnOkClickHandler">确 定</el-button>
        <span style='display:inline-block;width:60px;'>&nbsp;</span>
        <el-button size="mini"
                   type="danger"
                   @click="onAutoQuestionDialogBtnCancelClickHandler">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getquestiontypeall,
  getchaptersByAll,
  selectByTestquestion,
} from '@/api/examinations/gitlist'
import { addqaustion, addsaveBatch } from '@/api/examinations/sjkgetlist.js'
export default {
  data() {
    const tmp_tree_data = [
      {
        id: 1,
        label: '一级 1',
        children: [
          {
            id: 4,
            label: '二级 1-1',
            children: [
              {
                id: 9,
                label: '三级 1-1-1',
              },
              {
                id: 10,
                label: '三级 1-1-2',
              },
            ],
          },
        ],
      },
      {
        id: 2,
        label: '一级 2',
        children: [
          {
            id: 5,
            label: '二级 2-1',
          },
          {
            id: 6,
            label: '二级 2-2',
          },
        ],
      },
      {
        id: 3,
        label: '一级 3',
        children: [
          {
            id: 7,
            label: '二级 3-1',
          },
          {
            id: 8,
            label: '二级 3-2',
          },
        ],
      },
    ]
    return {
      ZJtag: [],
      defaultProps: {
        children: 'children',
        label: 'zjmc',
      },
      nanyicd: [
        { label: '简单', value: '简单' },
        { label: '一般', value: '一般' },
        { label: '很难', value: '很难' },
        { label: '较难', value: '较难' },
        { label: '非常难', value: '非常难' },
      ],
      stkid: '',
      sjshow: true,
      data1: {},
      xzsht: {
        ndfw: '',
        xztx: '',
        stndz: [],
      },
      nullxzsht: {
        ndfw: '',
        xztx: '',
        stndz: [],
      },
      data: [],
      radio: 0,
      appendFixedQuestionDialog: {
        dialogVisible: false,
        questionType: '',
        questionTypeArray: [],
      },
      adddata: {},
      appendAutoQuestionDialog: {
        id: 1000,
        dialogVisible: false,
        selectedCapters: 5,
        targetCount: 0,
        selectNode: '',
      },
      treeData: tmp_tree_data,
      questions: [
        // {
        //   type: 'multipleChoice',
        //   typeName: '多选题',
        //   title: '下列故事不是《三国演义》中的一项是：',
        //   answers: ['A.三顾茅庐', 'B.三气周瑜', 'C.桃园三结义', 'D.三打祝家庄'],
        //   rightAnswer: 'D',
        //   analysis: '无解析',
        //   labels: ['简单', '一般'],
        //   capter: '第一章',
        //   author: '管理员',
        //   updateTime: '2022-10-01',
        //   difficulty: '1.0',
        //   testTimes: '100',
        // },
        // {
        //   type: 'multipleChoice',
        //   typeName: '多选题',
        //   title: '下列故事不是《三国演义》中的一项是：',
        //   answers: ['A.三顾茅庐', 'B.三气周瑜', 'C.桃园三结义', 'D.三打祝家庄'],
        //   rightAnswer: 'D',
        //   analysis: '无解析',
        //   labels: ['较难', '非常难'],
        // },
      ],
    }
  },
  created() {
    getchaptersByAll().then((res) => {
      let resdata = res.data.data
      let resarr = []
      resdata.forEach((element) => {
        element = {
          // id: element.itempool.id,
          zjmc: element.itempool.kcmc + '【' + element.itempool.kcbm + '】',
          children: [element.chapters],
        }
        resarr.push(element)
      })
      this.data = resarr
      console.log(this.data)
    })
    getquestiontypeall().then((res) => {
      this.appendFixedQuestionDialog.questionTypeArray = res.data.data
      this.appendFixedQuestionDialog.questionTypeArray.forEach((e) => {
        e.quantity = 0
      })
      console.log(this.appendFixedQuestionDialog.questionTypeArray)
    })
  },
  methods: {
    clsdata() {
      this.sjshow = false
      this.xzsht = this.nullxzsht
    },
    clsdata1() {
      this.xzsht = this.nullxzsht
    },
    onAutoQuestionDialogBtnOkClickHandler: function () {
      if (this.sjshow) {
        console.log(this.xzsht.stndz, '===')
        addqaustion(this.xzsht).then((res) => {
          console.log(res), '随机添加回报'
        })
      } else {
        addsaveBatch(this.xzsht).then((res) => {
          console.log(res), '手动添加回报'
        })
      }

      this.appendAutoQuestionDialog.dialogVisible = false
    },

    handleClose(tag) {
      console.log(tag)
      this.ZJtag.splice(this.ZJtag.indexOf(tag), 1)
    },
    onAutoQuestionDialogBtnCancelClickHandler: function () {
      this.appendAutoQuestionDialog.dialogVisible = false
    },
    onFixQuestionDialogBtnOkClickHandler: function () {
      this.appendFixedQuestionDialog.dialogVisible = false
    },
    onFixQuestionDialogBtnCancelClickHandler: function () {
      this.appendFixedQuestionDialog.dialogVisible = false
    },
    onTreeNodeClickHandler: function (simpleVal, fullVal) {
      selectByTestquestion({ stkid: simpleVal.children[0].stkid }).then(
        (res) => {
          this.questions = res.data.data
          let daanarr = []
          this.questions.forEach((e) => {
            let daan = e.daxx.split('*-*-*')
            let zqda = e.zqda.split('*-*-*')
            e.zqda = zqda
            e.daxx = daan
            console.log(e.daxx)
          })
        }
      )
      console.log(simpleVal.children[0].stkid, 'ididi')
      this.appendAutoQuestionDialog.selectNode = fullVal
    },
    handleNodeClick(simpleVal, fullVal, fun) {
      console.log(fun, 'wewe')
      //el tab 添加控制
      //   console.log(fullVal)
      if (simpleVal.parentid) {
        // console.log(simpleVal)
        let name
        this.ZJtag.push({ name: simpleVal.zjmc })
        if (simpleVal.jb >= 1) {
          name
        }
      }
    },
    onTreeCurrentChangeHandler: function (simpleVal, fullVal, treeObj) {
      console.log(fullVal.label)
      this.appendAutoQuestionDialog.selectNode = fullVal
    },
    onBtnAddQuestionClickHandler: function () {
      switch (this.data1.zjfs) {
        case 1:
        case '1':
          this.$message.info('固定试题组卷')
          this.appendAutoQuestionDialog.dialogVisible = true
          break
        case 2:
        case '2':
          this.$message.info('随机抽题组卷')
          this.appendAutoQuestionDialog.dialogVisible = true

          break
        default:
          this.$message.warning('请先选择：组卷方式！')
          break
      }
    },
    renderContent: function (h, { node, data, store }) {
      return <span>{node.label}</span>
    },
  },
}
</script>
<style lang="less" scoped>
@import '../../courseAssessmentScoped.less';
@import '../../exportBtn.less';
.suosuo {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  line-height: 32px;
}
.bule {
  color: #004ca7;
}
.el-tree-node__content {
  justify-content: center;
}
.bule-b-top {
  text-align: center;
}
.bule-b {
  height: 15%;
  border-bottom: 1px solid #848687;
}
.el-dialog__wrapper {
  ::v-deep .newClazzDialog {
    height: 93%;
  }
}
div.questionContainer {
  border: 1px solid #004ca7;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0px;
}
span.questionTypeName {
  border-radius: 5px;
  border: 1px solid #51aef6;
  background-color: #f1f8fe;
  color: #51aef6;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  margin: 10px;
  line-height: 34px;
}
span.questionTitle {
  color: #004ca7;
  font-size: 18px;
  font-weight: bold;
  padding: 5px;
  margin: 10px;
  line-height: 34px;
}
div.questionAnswers {
  padding: 0px 10px;
}
span.questionAnswer {
  font-size: 16px;
  font-weight: bold;
  padding: 5px;
  margin: 10px;
  line-height: 34px;
  color: #606266;
}
span.questionRightAnswer {
  color: #51aef6;
  font-size: 18px;
  font-weight: bold;
  padding: 5px;
  margin: 10px;
  line-height: 34px;
}
span.questionSomethingLabel {
  font-size: 16px;
  font-weight: bold;
  padding: 5px 1px;
  margin: 10px 20px;
  line-height: 34px;
  color: #606266;
}
span.questionSomething {
  color: #606266;
  font-size: 16px;
  font-weight: normal;
  line-height: 34px;
}
span.questionLabel {
  border-radius: 5px;
  border: 1px solid #606266;
  color: #606266;
  font-size: 16px;
  font-weight: normal;
  padding: 1px 10px;
  margin: 1px 10px;
  line-height: 30px;
}
p.autoDialogEssay {
  font-size: 18px;
  font-weight: bold;
  color: #004ca7;
}
.xpaas-vertical-align-middle {
  .el-col {
    vertical-align: middle;
    .el-button {
      margin: 5px 0 0 0;
    }
  }
}
.bule-b-topten {
  margin-top: 2%;
  font-size: 16px;
  color: #004ca7;
}

.myradio {
  margin: 10px 0;
}
.search-result-pagin-panel {
  text-align: right;
}
.buttombox {
  margin-left: 20px;
}
.search-result-desc-panel {
  font-size: 14px;
  font-weidth: normal;
  font-family: @fontFamily;
  color: #004ca7;
  margin: 15px 0 0 0;
}
.el-pagination {
  color: red;
  ::v-deep > .el-pagination__total {
    color: #004ca7;
  }
}
.Questiontr {
  height: 300px;
}
.formItemdiv {
  height: 200px;
  display: flex;
}
.formItemdiv div {
  flex: 1;
}
.formItemdiv div:nth-child(2) {
  flex: 2;
  border-spacing: 1;

  > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    > label {
      width: 150px;
    }
  }
}
.addzijied {
  margin-top: 20px;
}
.mybuttom {
  margin: 5px 0;
}
// .el-tree-node__content {
//   justify-content: center;
// }
</style>